<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Axios 数据请求</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
</head>

<body>

    <div id="vm">
        {{ message }}
        <hr>
        <button @click="getData">获取get数据</button>
        <hr>
        <button @click="postData">获取post数据</button>
		<hr>
		GET:
		<hr>
		<ul>
			<li v-for="(item,index) in getItems" :key="index">
				{{item.name}} --- {{item.price}}
			</li>
		</ul>
		POST:
		<hr>
		<ul>
			<li v-for="(item,index) in postItems" :key="index">
				{{item.name}} === {{item.price}}
			</li>
		</ul>
    </div>

    <script>
        var vm01 = new Vue({
            el: '#vm',
            data: {
                message: 'Vue Axios',
				getItems: {},
				postItems: {}
            },
            methods: {
                getData() {
                	let that = this;
                    let apiUrl = 'http://s227.app1110631619.qqopenapp.com/api/getlist';
					axios.get(apiUrl)
					.then(res => {
						console.log(res);
						that.getItems = res.data.data;
					})
					.catch(err => {
						console.error(err);
					});
                },
                postData() {
                	let that = this;
                    let apiUrl = 'http://s227.app1110631619.qqopenapp.com/api/postlist';
					axios.post(apiUrl,
						{
							username: "张三"
						},{
							headers: {
								'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
								'token': 'tk1234'
							}
						}
					)
					.then(res => {
						console.log(res);
						that.postItems = res.data.data;
					})
					.catch(err => {
						console.error(err);
					});
                },

            }
        })
    </script>

</body>

</html>
